<template>
  <div class="login">
   

    <div class="loginBox">
      <h3>用户登录</h3>
      <span class="deadline"></span>
      <div class="form">
        <div class="input">
          <img src="../../assets/login/username.png" alt="" />
          <input type="text" placeholder="请输入用户名" v-model="username" />
        </div>
        <div class="input">
          <img src="../../assets/login/password.png" alt="" />
          <input type="password" placeholder="请输入密码" v-model="password" />
        </div>
      
        <!-- 登录按钮 -->
        <div class="btn" @click="setFlag">
          <a href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          登录
        </a>
          </div>
      </div>
    </div>
    <!-- <div class="loginbg2"></div> -->
  </div>
</template>

<script setup>
//导入
import Header from "./Header.vue";
import { useRouter, useRoute } from "vue-router";
const $router = useRouter();
let username = "1111";
let password = "2222";

const setFlag = () => {
  localStorage.setItem("isLogin", 1);
   $router.replace("/");
};
</script>

<style>
.login {
  /* 背景 */
  background-image: url(../../assets/login/bg.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
}


.loginBox {
  width: 62rem;
  height: 50rem;
  background-image: url(../../assets/login/loginbox.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;

  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25rem;
  margin-left: -31rem;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.loginBox h3 {
  font-size: 3rem;
  font-weight: 600;
  color: rgb(62, 197, 231);
  margin-top: 7rem;
  text-align: center;
}
.deadline {
  display: block;
  width: 10rem;
  height: 0.5rem;
  background: #01cfff;
  border-radius: 0.5rem;
  margin-top: 1rem;
}
.form {
  width: 44.5rem;
  height: 44.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.input {
  width: 28rem;
  height: 5rem;
  line-height: 5rem;
  background-image: url(../../assets/login/input.png);
  display: flex;
  flex-direction: row;
  align-items: center;
}
.input img {
  margin-left: 3rem;
}
.form input {
  border: none;
  outline: none;
  background-color: transparent;
  border: none;
  color: aliceblue;
}
::-webkit-input-placeholder {
  color: rgb(51, 189, 239);
}
.input input {
  width: 18rem;
  height: 2.2rem;
  margin-left: 2rem;
  font-size: 2.4rem;
}
.input .code {
  width: 23rem;
  height: 4.3rem;
  line-height: 1.1rem;
}
/* .btn {
  width: 16rem;
  height: 5.6rem;
  line-height: 5.6rem;
  text-align: center;
  font-size: 2.5rem;
  color: rgb(250, 250, 250);
  background-image: url(/src/assets/login/login.png);
  cursor: pointer;
  margin-bottom: 5rem;
} */

.btn  a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #03e9f4;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  letter-spacing: 4px;
  text-align: center;
  font-size: 2.5rem;
  background-image: url(/src/assets/login/login.png);
  /* cursor: pointer; */
  margin-bottom: 5rem;
}

.btn a:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}

.btn a span {
  position: absolute;
  display: block;
}

.btn a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}


.btn a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: 0.25s;
}



.btn a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: 0.5s;
}


.btn a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: 0.75s;
}

/* 按钮框的动画 上*/
@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}
/* 按钮框的动画 右*/
@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

/* 按钮框的动画 下*/
@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}
/* 按钮框的动画 左*/
@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>
